<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 新增的 api
        /*
            ES6 给 Object 拓展了许多新的方法，如：
            - keys(obj)：获取对象的所有 key 形成的数组
            - values(obj)：获取对象的所有 value 形成的数组
            - entries(obj)：获取对象的所有 key 和 value 形成的二维数组。格式：`[[k1,v1],[k2,v2],...]`
            - assign(dest, ...src) ：将多个 src 对象的值 拷贝到 dest 中。（第一层为深拷贝，第二层为浅拷贝）
        */
        const person = {
            name: 'jack',
            age: 21,
            language: ['java', 'js', 'css']
        }
        console.log('对象所有属性：', Object.keys(person)); // ['name', 'age', 'language']
        console.log('对象所有属性值：', Object.values(person)); // ['jack', 21, Array(3)]
        console.log('对象所有entry：', Object.entries(person)); // [Array(2), Array(2), Array(2)]

        // assign:对象赋值函数
        const target = { 'name': 'yangpizhu' };
        const age = { 'age': 26 };
        const addr = { 'address': '深圳宝安' };
        Object.assign(target, age, addr); // 会将后面的值赋值给第一个对象
        console.log("对象拷贝之后的值：", target); // {name: 'yangpizhu', age: 26, address: '深圳宝安'}

        // 2. 声明对象简写
        let name = 'ypz';
        let ypzAge = 18;
        // 之前的写法
        const ypzObj1 = { name: name, age: ypzAge };
        console.log('es6之前对象写法', ypzObj1); // es6之前对象写法 {name: 'ypz', age: 18}
        // es6之后对象写法，ES6：属性名和属性值变量名一样，可以省略
        const ypzObj2 = { name, age: ypzAge };
        console.log('es6之后对象写法', ypzObj2); // es6之后对象写法 {name: 'ypz', age: 18}

        // 3. 对象的函数属性简写
        let person2 = {
            name: 'yangpizhu',
            // 以前的函数属性
            eat: function (food) {
                console.log('以前的函数属性写法：' + this.name + '在吃' + food);
            },
            // 箭头函数优化函数属性，这里拿不到 this
            eat2: food => console.log('箭头函数属性写法：' + person2.name + '在吃' + food),
            // 函数简化写法
            eat3(food) {
                console.log('函数简化写法：' + this.name + '在吃' + food);
            }
        };
        person2.eat('炒面'); // 以前的函数属性写法：yangpizhu在吃炒面
        person2.eat2('炒粉'); // 箭头函数属性写法：yangpizhu在吃炒粉
        person2.eat3('炒饭'); // 函数简化写法：yangpizhu在吃炒饭

        // 4. 对象拓展运算符
        // 拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
        // 4.1 拷贝对象（深拷贝）
        let person41 = { name: 'yangpizhu', age: 18 };
        let copyPerson41 = { ...person41 }
        console.log('深拷贝：', copyPerson41); // 深拷贝： {name: 'yangpizhu', age: 18}
        // 4.2 合并对象
        let person42 = { name: 'yangpizhu', age: 18 };
        let person43 = { name: 'ypz', address: '深圳宝安', hobby: { name: 'basketball' }};
        let mergePerson = { ...person42, ...person43 }; // //如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值
        console.log('合并对象：', mergePerson); // 合并对象： {name: 'ypz', age: 18, address: '深圳宝安'}
        
    </script>
</body>

</html>